<!DOCTYPE html>
<html>
    <head>

        <link rel="canonical" href="http://www.jointjs.com/" />
        <meta name="description" content="Create interactive diagrams in JavaScript easily. JointJS plugins for ERD, Org chart, FSA, UML, PN, DEVS, LDM diagrams are ready to use." />
        <meta name="keywords" content="JointJS, JavaScript, diagrams, diagramming library, UML, charts" />

        <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" type="text/css" />
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

        <link rel="stylesheet" href="css/tutorial.css" />
        <link rel="stylesheet" href="../node_modules/prismjs/themes/prism.css">
        <link rel="stylesheet" href="../node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css">
        <link rel="stylesheet" href="../node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css">

        <!-- Dependencies: -->
        <script src="../node_modules/jquery/dist/jquery.js"></script>
        <script src="../node_modules/lodash/lodash.js"></script>
        <script src="../node_modules/backbone/backbone.js"></script>

        <link rel="stylesheet" type="text/css" href="../build/joint.min.css" />
        <script type="text/javascript" src="../build/joint.min.js"></script>

        <title>JointJS - JavaScript diagramming library - Getting started.</title>

    </head>
    <body class="language-javascript tutorial-page">

        <script>
            SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(toElement) {
                return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());
            };
        </script>

        <div class="tutorial">

            <h2>Elements</h2>

            <p><a href="hello-world.html">In the first part of the tutorial, we saw a working example of a
                simple JointJS application:</a></p>

            <div class="paper" id="paper-hello-world"></div>

            <p><a href="graph-and-paper.html">In the previous section, we have created a graph and learned how to modify
                the appearance of the paper that shows it on our page:</a></p>

            <div class="paper" id="paper-graph-and-paper"></div>

            <p>In this section, we will learn how to create graph elements and how to change their appearance.
                This is an introduction to elements as they appear in the Hello, World! application;
                <a href="custom-elements.html">more advanced topics are covered later in the tutorial series</a>.
                We will continue with the code we modified in the previous section:</p>

            <pre class="line-numbers" data-line="33-45,47-50"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;link rel="stylesheet" type="text/css" href="node_modules/jointjs/dist/joint.css" /&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;!-- content --&gt;
    &lt;div id="myholder"&gt;&lt;/div&gt;

    &lt;!-- dependencies --&gt;
    &lt;script src="node_modules/jquery/dist/jquery.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/lodash/lodash.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/backbone/backbone.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/jointjs/dist/joint.js"&gt;&lt;/script&gt;

    &lt;!-- code --&gt;
    &lt;script type="text/javascript"&gt;

        var graph = new joint.dia.Graph;

        var paper = new joint.dia.Paper({
            el: document.getElementById('myholder'),
            model: graph,
            width: 600,
            height: 100,
            gridSize: 10,
            drawGrid: true,
            background: {
                color: 'rgba(0, 255, 0, 0.3)'
            }
        });

        var rect = new joint.shapes.standard.Rectangle();
        rect.position(100, 30);
        rect.resize(100, 40);
        rect.attr({
            body: {
                fill: 'blue'
            },
            label: {
                text: 'Hello',
                fill: 'white'
            }
        });
        rect.addTo(graph);

        var rect2 = rect.clone();
        rect2.translate(300, 0);
        rect2.attr('label/text', 'World!');
        rect2.addTo(graph);

        var link = new joint.shapes.standard.Link();
        link.source(rect);
        link.target(rect2);
        link.addTo(graph);

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

            <p>The code illustrates the basic idea of working with elements:</p>

            <ul>
                <li>First, an element is created by calling its constructor.</li>
                <li>Then, different methods are called on the element to set its properties (position, size,
                    attributes...).</li>
                <li>Finally, the element is added to the graph.</li>
            </ul>

            <p>In our case, the two elements are instances of
                <a href="/docs/jointjs#shapes.standard.Rectangle" target="_blank"><code>joint.shapes.standard.Rectangle</code></a>.
                The <a href="/docs/jointjs#shapes.standard.intro" target="_blank">standard shape library</a>
                contains many more ready-made element definitions (e.g. Ellipse, Embedded Image, Cylinder...) that can
                be used in your document.
                Moreover, <a href="custom-elements">advanced users may supply their own element definitions
                instead</a>, by extending the basic
                <a href="/docs/jointjs#dia.Element" target="_blank"><code>joint.dia.Element</code></a> class.</p>

            <p>Our demo showcases some of the most important
                <a href="/docs/jointjs#dia.Element" target="_blank">Element methods</a>:</p>

            <ul>
                <li><a href="/docs/jointjs#dia.Element.prototype.position" target="_blank"><code>element.position()</code></a>
                    - sets the position of the origin of the element (the top-left corner), relative to the paper's
                    coordinate system (taking into account paper scaling and other transformations).</li>
                <li><a href="/docs/jointjs#dia.Element.prototype.resize" target="_blank"><code>element.resize()</code></a>
                    - sets the dimensions of the element.</li>
                <li><a href="/docs/jointjs#dia.Element.prototype.clone" target="_blank"><code>element.clone()</code></a>
                    - clones an existing element, including its position, dimensions, and attributes (attributes are
                    explained in more detail below).</li>
                <li><a href="/docs/jointjs#dia.Element.prototype.translate" target="_blank"><code>element.translate()</code></a>
                    - moves the element by the specified distance along the two coordinate axes.
                    There are methods to
                    <a href="/docs/jointjs#dia.Element.prototype.scale" target="_blank">scale</a> and
                    <a href="/docs/jointjs#dia.Element.prototype.rotate" target="_blank">rotate</a> elements, too.</li>
                <li><a href="/docs/jointjs#dia.Element.prototype.addTo" target="_blank"><code>element.addTo()</code></a>
                    - adds the element to a graph so it can be rendered.
            </ul>

            <h3 id="element-styling">Element Styling</h3>

            <p id="attr">Visually, the most important function is the one that changes element styling:</p>

            <ul>
                <li><a href="/docs/jointjs#dia.Element.prototype.attr" target="_blank"><code>element.attr()</code></a>
                    - programmatically assigns SVG attributes directly to the SVGElements of the shape's markup.
                    (CSS styles may still be used on top of the styling defined here, and they will have precedence over
                    these attributes.)</li>
            </ul>

            <p>When <code>element.attr()</code> is called with one object as argument, the keys of the object are
                selectors that correspond to SVGElements of the shape's markup; each of those can have one or more
                attributes defined alongside the value to be set.
                If you only need to change one value, you can also call <code>element.attr()</code> with two arguments;
                the first is the path of the attribute in the form <code>'selector/attribute'</code> and the second is
                the value to be assigned.</p>

            <p>If you are completely new to SVG, you may want to have a look at, for example, the
                <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes" target="_blank">Fills
                and Strokes tutorial on MDN</a>.
                JointJS is able to handle all
                <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute" target="_blank">standard SVG
                attributes</a>, however, please note that we strongly encourage everyone to use camelCase versions of
                attribute names for consistency and in order to avoid the need for quotation marks in attribute name
                keys.
                In addition, JointJS provides an extensive set of non-standard
                <a href="/docs/jointjs#dia.attributes" target="_blank">special JointJS attributes</a>; these allow you
                to
                <a href="/docs/jointjs#dia.attributes.ref" target="_blank">specify attributes relatively to other
                shape selectors</a>, among other things.
                <a href="special-attributes.html">Special attributes are discussed in detail later in the
                tutorial.</a></p>

            <p>The
                <a href="/docs/jointjs#shapes.standard.Rectangle" target="_blank"><code>joint.shapes.standard.Rectangle</code></a>
                shape used in our example has two selectors defined:
                <code>body</code> (the <code>&lt;rect&gt;</code> SVGElement itself),
                and <code>label</code> (the <code>&lt;text&gt;</code> SVGElement inside the shape).
                Other element shapes have their own selector names (although consistency was preserved where
                applicable, e.g. with <code>body</code>); please refer to the <code>joint.shapes.standard</code>
                <a href="/docs/jointjs#shapes.standard" target="_blank">documentation</a> for detailed information.</p>

            <p>In the case of the <code>rect</code> element, we can see that the <code>body</code> selector is assigned
                a <code>fill</code> color attribute, while the <code>label</code> selector also has its
                <code>text</code> content set to <code>'Hello'</code> (via a
                <a href="/docs/jointjs#dia.attributes.text">JointJS special attribute</a>).</p>

            <pre><code>rect.attr({
    body: { // selector for the &lt;rect&gt; SVGElement
        fill: 'blue'
    },
    label: { // selector for the &lt;text&gt; SVGElement
        text: 'Hello',
        fill: 'white'
    }
});</code></pre>

            <p>In the case of the <code>rect2</code> element, we are assigning the value <code>'World!'</code> to
                <code>'label/text'</code>.
                Here <code>label</code> is the selector for the <code>&lt;text&gt;</code> SVGElement; <code>text</code>
                is the attribute we want to modify.</p>

            <pre><code>rect2.attr('label/text', 'World!');</code></pre>

            <p>Note that this is equivalent to calling:</p>

            <pre><code>rect2.attr('label', {
    text: 'World!'
});</code></pre>

            <p>The same effect can also be achieved by passing a single object argument to
                <code>rect2.attr()</code>:</p>

            <pre><code>rect2.attr({
    label: {
        text: 'World!'
    }
});</code></pre>

            <h3 id="example">Example</h3>

            <p>Now let us use <code>element.attr()</code> to change the look of our elements:</p>

            <div class="paper" id="paper-elements"></div>

            <pre class="line-numbers" data-line="33-45,47-65,72-89,91-105,112-126,128-147" style="padding-left:3.5em"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;link rel="stylesheet" type="text/css" href="node_modules/jointjs/dist/joint.css" /&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;!-- content --&gt;
    &lt;div id="myholder"&gt;&lt;/div&gt;

    &lt;!-- dependencies --&gt;
    &lt;script src="node_modules/jquery/dist/jquery.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/lodash/lodash.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/backbone/backbone.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/jointjs/dist/joint.js"&gt;&lt;/script&gt;

    &lt;!-- code --&gt;
    &lt;script type="text/javascript"&gt;

        var graph = new joint.dia.Graph;

        var paper = new joint.dia.Paper({
            el: document.getElementById('myholder'),
            model: graph,
            width: 600,
            height: 300, // height had to be increased
            gridSize: 10,
            drawGrid: true,
            background: {
                color: 'rgba(0, 255, 0, 0.3)'
            }
        });

        var rect = new joint.shapes.standard.Rectangle();
        rect.position(100, 30);
        rect.resize(100, 40);
        rect.attr({
            body: {
                fill: 'blue'
            },
            label: {
                text: 'Hello',
                fill: 'white'
            }
        });
        rect.addTo(graph);

        var rect2 = new joint.shapes.standard.Rectangle();
        rect2.position(400, 30);
        rect2.resize(100, 40);
        rect2.attr({
            body: {
                fill: '#2C3E50',
                rx: 5,
                ry: 5,
                strokeWidth: 2
            },
            label: {
                text: 'World!',
                fill: '#3498DB',
                fontSize: 18,
                fontWeight: 'bold',
                fontVariant: 'small-caps'
            }
        });
        rect2.addTo(graph);

        var link = new joint.shapes.standard.Link();
        link.source(rect);
        link.target(rect2);
        link.addTo(graph);

        var rect3 = new joint.shapes.standard.Rectangle();
        rect3.position(100, 130);
        rect3.resize(100, 40);
        rect3.attr({
            body: {
                fill: '#E74C3C',
                rx: 20,
                ry: 20,
                strokeWidth: 0
            },
            label: {
                text: 'Hello',
                fill: '#ECF0F1',
                fontSize: 11,
                fontVariant: 'small-caps'
            }
        });
        rect3.addTo(graph);

        var rect4 = new joint.shapes.standard.Rectangle();
        rect4.position(400, 130);
        rect4.resize(100, 40);
        rect4.attr({
            body: {
                fill: '#8E44AD',
                strokeWidth: 0
            },
            label: {
                text: 'World!',
                fill: 'white',
                fontSize: 13
            }
        });
        rect4.addTo(graph);

        var link2 = new joint.shapes.standard.Link();
        link2.source(rect3);
        link2.target(rect4);
        link2.addTo(graph);

        var rect5 = new joint.shapes.standard.Rectangle();
        rect5.position(100, 230);
        rect5.resize(100, 40);
        rect5.attr({
            body: {
                fill: '#2ECC71',
                strokeDasharray: '10,2'
            },
            label: {
                text: 'Hello',
                fill: 'black',
                fontSize: 13
            }
        });
        rect5.addTo(graph);

        var rect6 = new joint.shapes.standard.Rectangle();
        rect6.position(400, 230);
        rect6.resize(100, 40);
        rect6.attr({
            body: {
                fill: '#F39C12',
                rx: 20,
                ry: 20,
                strokeDasharray: '1,1'
            },
            label: {
                text: 'World!',
                fill: 'gray',
                fontSize: 18,
                fontWeight: 'bold',
                fontVariant: 'small-caps',
                textShadow: '1px 1px 1px black'
            }
        });
        rect6.addTo(graph);

        var link3 = new joint.shapes.standard.Link();
        link3.source(rect5);
        link3.target(rect6);
        link3.addTo(graph);

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

            <p>JointJS source code: <a href="js/elements.js" target="_blank">elements.js</a></p>

            <p>The <a href="filters-gradients.html">Filters and Gradients</a> tutorial illustrates some more advanced methods
                of SVG styling when applied to elements.</p>

            <p>We now know how to change the appearance of our elements.</p>

            <p><a href="links.html">The next step is to learn how to work with links.</a></p>

        </div><!--end tutorial-->

        <script src="../node_modules/prismjs/prism.js"></script>
        <script src="../node_modules/prismjs/plugins/line-numbers/prism-line-numbers.js"></script>
        <script src="../node_modules/prismjs/plugins/line-highlight/prism-line-highlight.js"></script>

        <script src="js/hello-world.js"></script>
        <script src="js/graph-and-paper.js"></script>
        <script src="js/elements.js"></script>
    </body>
</html>
